<template>
	<view class="role" >
		<!-- <image src="../../../static/imgs/roleBg.png" mode=""></image> -->
	    <view class="bg" :style="{ 'background-image': 'url(' + bg + ')' }">
	    	
	    </view>
		<text class="wel pos">Welcome</text>
		<text class="title pos">进入蓝鲸微聘</text>

		<view class="card personal" :style="{ 'background-image': 'url(' + personBg + ')' }" @tap ="goUser()">
			<view class="content">
				<view>
					<text>个人身份</text>
					<image src="../../static/imgs/next.png" mode=""></image>
				</view>

				<view><text>求职者入口</text></view>
			</view>
		</view>

		<view class="card enterprise" :style="{ 'background-image': 'url(' + enterBg + ')' }" @tap="goCompany()">
			<view class="content">
				<view>
					<text>企业身份</text>
					<image src="../../static/imgs/next.png" mode=""></image>
				</view>

				<view><text>招聘者入口</text></view>
			</view>
		</view>
	</view>
</template>

<script>
import {mapState} from 'vuex';
import enterBg from '../../static/imgs/company.png';
import personBg from '../../static/imgs/personal.png';
import bg from '../../static/imgs/roleBg.png';
export default {
	data() {
		return {
			personBg: personBg,
			enterBg: enterBg,
			bg:bg,
			YourName:['一只大灰狼','小忆控','澜川若宁','全部不再','全部不再','洒一地阳光ヽ','洒一地阳光ヽ']
		};
	},
	onLoad() {},
	onShow() {},
	onHide() {},
	onPageScroll: function(Object) {},
	methods: {
		goUser() {
            this._toView('login/step1');
        },
        goCompany() {
            this._toView('views/mine/perfectData');
        },
	}
};
</script>

<style scoped lang="less">
.role {
	width: 750upx;
	margin: 0 auto;
	height: 100vh;
	background-color: #f9f9f9;

	.bg{
		width: 100%;
		height: 492upx;
		background-size: 100% 100%;
	}

	.pos {
		position: absolute;
		left: 64upx;
		color: #ffffff;
	}

	.wel {
		top: 173upx;
		font-size: 34upx;
		
	}

	.title {
		top: 250upx;
		font-size: 60upx;
	}

	.card {
		width: 568upx;
		height: 264upx;
		border-top-left-radius: 20upx;
		border-top-right-radius: 20upx;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		background-size: 100% 100%;

		.content {
			padding: 80upx 0 0 40upx;
			view {
				&:nth-child(1) {
					height: 40upx;
					display: flex;
					align-items: center;
					margin-bottom: 28upx;
					text {
						font-size: 40upx;
					}
					image {
						width: 40upx;
						height: 40upx;
						margin-left: 28upx;
					}
				}

				&:nth-child(2) {
					text {
						font-size: 28upx;
						color: #666;
					}
				}
			}
		}
	}

	.personal {
		top: 408upx;
	}

	.enterprise {
		top: 720upx;
	}
}
</style>
